<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title id="title"></title>
<style type="text/css">
*{
	padding:20px;
	border: dotted 1px;
	transition: all 2s;
}
section{
	border: green dotted;
}
article{
	height: 1000px;
	border: solid;
	background: linear-gradient(yellow,#0ff);
}
</style>
</head>
<body>
<section id="sec">
<article class="" id="art1">11 1111<br>1 1 1 11 1 11<br>1 1 1 1 11 1<br>1 1 1<br>1 1 1<br>1 1  11 1 1 1</article>

<article class="" id="art2">222 222 2 2 22 2 2  2 2 2222<br> 222 2 22222 222 2 2 22 2 2  2 2222 222 2 2 22 2 2  22 2222<br> 222 2 22 2222<br> 222 2 22 2222<br> 222 2 22 2222<br> 222 2 2 2222<br> 222 2 22 2222<br> 222 2 22 2222<br> 222 2 22 2 2222<br> 222 2 22 2222<br> 222 2 22 2222<br> 222 2 22  2 22 2222<br> 222 2 2222<br> 222 2 22 2222<br> 222 2 22 2222<br> 222 2 22 2222<br> 222 2 22 2222<br> 222 2 22 2222<br> 222 2 22 2222<br> 222 2 2 22 2 2  2 2222 222 2 2 22 2 2  2 2222 222 2 2 22 2 2  2 2222 222 2 2 22 2 2  2 2</article>

<article class="" id="art3"> 3<br>33 3<br>33 3<br>33 3<br>33 3<br>33 3<br>33 3<br>33 3<br>33 3<br>33 3<br>33 3<br>33 3<br>33 3<br>33 3<br>33 3<br>33 3<br>33 3<br>33 3<br>33 3<br>33 3<br>33 3<br>33 3<br>33 3<br>33 3<br>33 3<br>33 3<br>33</article>
<article class="" id="art4">44 <br> 4 <br>  4444 <br> 4 <br>  4444 <br> 4 <br>  4444 <br> 4 <br>  4444 <br> 4 <br>  4444 <br> 4 <br>  4444 <br> 4 <br>  4444 <br> 4 <br>  4444 <br> 4 <br>  4444 <br> 4 <br>  4444 <br> 4 <br>  4444 <br> 4 <br>  4444 <br> 4 <br>  4444 <br> 4 <br>  4444 <br> 4 <br>  4444 <br> 4 <br>  4444 <br> 4 <br>  4444 <br> 4 <br>  4444 <br> 4 <br>  4444 <br> 4 <br>  4444 <br> 4 <br>  44</article>
</section>
<script type="text/javascript">
console.log(6666)
// onmousewheel
index=1
document.onmousewheel=function(e){
// document.onscroll=function(e){//flex没有滚
	console.log(e.target,"滚-----------")
	console.log(document.scrollingElement.scrollTop,"[滚顶]")
	console.log(e.target.offsetTop,e.target.scrollTop,"所在头")//t 0
		newTop=e.target.offsetTop+100
	console.log(newTop,"翻页点+100")
	console.log(e.target.nextElementSibling.offsetTop,"下一个头")
	
	
	// console.log(art2.scrollTop,"-----")//0
	// console.log(art2.offsetTop)//763
	
	// document.scrollingElement.scrollTop=600//跳过去
	// document.scrollingElement.onmousewheel=600//无效
	// document.scrollingElement.scrollTop=600//跳过去
	// e.target.scrollTop=500
	// e.target.offsetTop=500
	// location.href="#art3"
	
	// document.scrollingElement.scrollTop=65
	

			if(newTop<=document.scrollingElement.scrollTop){
				"翻页"
				document.scrollingElement.scrollTop=e.target.nextElementSibling.offsetTop//跳过去
				// location.href="#art3"

				// newTop=e.target.nextElementSibling.offsetTop+200
				// index++
			}
}
	console.log(art1,art1.nextElementSibling)
</script>
</body>
</html>
